<template>
  <div class="container">
    <div class="head flex-col flex-x-center flex-y-center">
      <img class="bg" src='@/assets/images/points-back.png'>
      <span class="jifen">888</span>
      <span class="tit">当前积分余额</span>
    </div>
    <div class="pd bg-white flex-row">
     <div class="flex-col flex-grow-1 flex-x-center flex-y-center">
     	<div class="subtit">积分收益</div>
     	<div class="moneyColor">111</div>
     </div>
    	<div class="line flex-grow-0"></div>
    	 <div class="flex-col flex-grow-1 flex-x-center flex-y-center">
     	<div class="subtit">积分收益</div>
     	<div class="moneyColor">111</div>
     </div>
    	<div class="line flex-grow-0"></div>
    	  <div class="flex-col flex-grow-1 flex-x-center flex-y-center">
     	<div class="subtit">积分收益</div>
     	<div class="moneyColor">111</div>
     </div>

    </div>
    <div class="renwu mg-t">
    	<h4>积分收支明细</h4> 
    	<div class="flex flex-col flex-x-center flex-y-center ">
    		<div class="flex-row flew-y-center item bd-bottom">
    			<div class="flex-grow-1 title flex-x-center flex-col">
    				<div class="pd-t-b">推广二维码</div>
    				<div class="time">2018-02-23</div>
    			</div>
    			<div class="flex-grow-0 flex-y-center shouzhi">+150</div>
    		</div>
    		<div class="flex-row flew-y-center item bd-bottom">
    			<div class="flex-grow-1 title flex-x-center flex-col">
    				<div class="pd-t-b">推广二维码</div>
    				<div class="time">2018-02-23</div>
    			</div>
    			<div class="flex-grow-0 flex-y-center shouzhi">+110</div>
    		</div>
    		<div class="flex-row flew-y-center item bd-bottom">
    			<div class="flex-grow-1 title flex-x-center flex-col">
    				<div class="pd-t-b">推广二维码</div>
    				<div class="time">2018-02-23</div>
    			</div>
    			<div class="flex-grow-0 flex-y-center shouzhi">+1</div>
    		</div>
    	</div>

    </div>
  </div>
</template>
<script></script>
<style scoped lang="less">
.head {
  height: 10rem;
  position: relative;
  width: 100%;
  .jifen{
  	font-size:2rem;
  	color:#fff;
  	z-index:99;
  }
  .tit{
  	font-size:.5rem;
    color:#fff;
  	z-index:99;
  }
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

}
  .renwu{
	background-color:#fff;
	height:15rem;
	padding:.5rem;
	.item{
		width:100%;
		font-size:.6rem;
		padding:.3rem 0;
    .title{
      width:3rem;
    }
	}
	h4{
		font-size:.7rem;

	}
	.shouzhi{
		font-size:1rem;
	}

  }
.line{
	height:1rem;
	width:1px;
	background-color:#ddd;
}
.moneyColor,.subtit{
	font-size:.7rem;
}
.time{
	font-size:.5rem;
	color:#bbbec4;
}
</style>
